import { Directive, DirectiveBinding } from 'vue';
import useDragSeriesStore from '@/store/modules/dragSeries';

export default {
	mounted(el: HTMLElement, binding: DirectiveBinding) {
		const { value } = binding;
		const { img, type, call } = value;
		const dragSeriesStore = useDragSeriesStore();
		if (type === 'resource') {
			el.addEventListener('mousedown', (e: any) => {
				if (e.button != 2) {
					return;
				}
				let seriesId = e.srcElement.dataset.seriesId;
				if (!seriesId) {
					return;
				}
				seriesId = seriesId ?? seriesId;
				//传入初始化方块数据
				dragSeriesStore.setDragSeriesId(seriesId);
				dragSeriesStore.setDragBlock({
					show: true,
					width: el.clientWidth,
					height: el.clientHeight,
					initMouseX: e.clientX,
					initMouseY: e.clientY,
					img
				});
				call ? call() : null;
			});
		}

		if (value.type === 'target') {
			//为实例视图添加事件
			el.addEventListener('mouseover', (e: any) => {
				const dragSeriesStore = useDragSeriesStore();
				const seriesId = dragSeriesStore.dragSeriesId;
				if (seriesId === undefined) {
					return;
				}
				const index = e.srcElement.dataset.index ?? e.srcElement.parentNode.parentNode.dataset.index;
				value.cb(seriesId, index);
				dragSeriesStore.clearSeriesId();
			});
		}
	}
};
